import React, {Component} from 'react';
import './index.less'
import {Button, Form, Input} from "antd";
import Notice from  '../../../components/Notice'
import {userReg} from "../../../network/user";

class Reg extends Component {
    state = {
        isLoading: false
    }
    onFinish = async (values) => {
        this.setState({
            isLoading : true
        })
        const {email,password,nickname} = values
        let result = await userReg(email,password,nickname)
        if(result.code === 200){
            Notice('success',result.msg,'进入登录标签页')
            setTimeout(() => {
                this.setState({
                    isLoading : false
                })
            },1000)
            this.form.resetFields()
        }else{
            Notice('error',result.msg,'请重新输入')
            setTimeout(() => {
                this.setState({
                    isLoading : false
                })
            },1000)
            this.form.resetFields()
        }
    }
    render() {
        return (
            <div>
                <Form
                    ref={node => this.form = node}
                    name="basic"
                    labelCol={{
                        span: 7,
                    }}
                    wrapperCol={{
                        span: 10,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                >
                    <Form.Item
                        name="email"
                        label="邮箱"
                        rules={[
                            {
                                type: 'email',
                                message: '输入格式必须是邮箱！',
                            },
                            {
                                required: true,
                                message: '邮箱不能为空！',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="nickname"
                        label="昵称"
                        tooltip="想让别人怎么称呼?"
                        rules={[{ required: true, message: '请输入您的昵称!', whitespace: true }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            {
                                required: true,
                                message: '密码不能为空！',
                            },
                        ]}
                        hasFeedback
                    >
                        <Input.Password />
                    </Form.Item>

                    {/*确认密码*/}
                    <Form.Item
                        name="confirm"
                        label="确认密码"
                        dependencies={['password']}
                        hasFeedback
                        rules={[
                            {
                                required: true,
                                message: '请确认您的密码！',
                            },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('两次输入的密码不相同'));
                                },
                            }),
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    {/*注册按钮*/}
                    <Form.Item
                        wrapperCol={{
                            offset: 9,
                            span: 24,
                        }}
                    >
                        <Button type="primary" htmlType="submit" loading={this.state.isLoading}>
                            注册
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}

export default Reg;